﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>无标题页</title>
    <script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery.js"></script>

    <script type="text/javascript">
    $(document).ready(function(){
        $(".jsstar >li").hover(
            function(){$(this).css({"background-position":"left bottom"}).prev().trigger("mouseover")},
            function(){$(this).css({"background-position":"left top"}).prev().trigger("mouseout")})
        .click(function(){alert($(this).attr("title"))});     
    });
    </script>
    <style type="text/css">
        .block
        { margin:10px;
          padding :10px;
          border:solid 1px #ccc;
          font-family:Verdana;
          font-size:12px;
            }
       /*CSS Star start*/
        .star-rating
        {
            list-style: none;
            margin: 0px;
            padding: 0px;
            width: 100px;
            height: 20px;
            position: relative;
            background: url(star_rating.gif) top left repeat-x;
        }
        .star-rating li
        {
            padding: 0px;
            margin: 0px; 
            float: left; 
        }
        .star-rating li a
        {
            display: block;
            width: 20px;
            height: 20px;
            text-decoration: none;
            text-indent: -9000px;
            z-index: 20;
            position: absolute;
            padding: 0px;
        }
        .star-rating li a:hover
        {
            background: url(star_rating.gif) left bottom;
            z-index: 1;
            left: 0px;
        }
        .star-rating a.one-star
        {
            left: 0px;
        }
        .star-rating a.one-star:hover
        {
            width: 20px;
        }
        .star-rating a.two-stars
        {
            left: 20px;
        }
        .star-rating a.two-stars:hover
        {
            width: 40px;
        }
        .star-rating a.three-stars:hover
        {
            width: 60px;
        }
        .star-rating a.three-stars
        {
            left: 40px;
        }
        .star-rating a.four-stars
        {
            left: 60px;
        }
        .star-rating a.four-stars:hover
        {
            width: 80px;
        }
        .star-rating a.five-stars
        {
            left: 80px;
        }
        .star-rating a.five-stars:hover
        {
            width: 100px;
            
        }
        /*CSS Star end*/
        .jsstar
        {   list-style: none;
            margin: 0px;
            padding: 0px;
            width: 100px;
            height: 20px;
            position: relative;
            
            }
         .jsstar li  
         {
            padding:0px;
            margin: 0px; 
            float: left; 
            width:20px;
            height:20px;
            background:url(star_rating.gif) 0 0 no-repeat;
            }  
            
    </style>
 
</head>
<body>
<div class="block">
<p>纯CSS实现</p>
<ul class='star-rating'>
  <li><a href='#' title='一星' class='one-star'>1</a></li>
  <li><a href='#' title='二星' class='two-stars'>2</a></li>
  <li><a href='#' title='三星' class='three-stars'>3</a></li>
  <li><a href='#' title='四星' class='four-stars'>4</a></li>
  <li><a href='#' title='五星' class='five-stars'>5</a></li>
</ul>
</div>
<div class="block">
<p>Javascript + CSS实现</p>
<ul class="jsstar">
    <li title="一星"></li>
    <li title="二星"></li>
    <li title="三星"></li>
    <li title="四星"></li>
    <li title="五星"></li>
</ul>
</div>
</body>
</html>
